import React from 'react';
import style from './style.okr';
import cx from 'classnames';

const ColorMap = {
  3: {
    color: '#aab4c8',
    text: '低'
  },
  2: {
    color: '#3490ed',
    text: '中'
  },
  1: {
    color: '#fa91a0',
    text: '高'
  },
  0: {
    color: '#ff6388',
    text: '极高'
  },
};

class Priority extends React.Component {
  constructor(props) {
      super(props);
      this.displayName = 'Priority';
  }
  render() {
    const {
      label,
      value,
    } = this.props;
    return (
      <div className={cx({
        [style['priority-item']]: true,
        [style['priority-label']]: label,
      })}>
        <div>
          <div className={style['priority-dot']} style={{backgroundColor: ColorMap[value].color}}></div>
          {
            label ? <div className={style['priority-text']}>{ColorMap[value].text}</div> : null
          }
        </div>
      </div>
    );
  }
}

export default Priority;
